<!DOCTYPE html>
<html>
	<head xmlns:th="http://www.thymeleaf.org">
		<base th:href="@{/}">
	<meta charset="utf-8">
	<title>订单列表</title>
		<link href="/lib/layui-v2.6.3/css/layui.css" rel="stylesheet">
		<!--<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="/css/style.min.css" rel="stylesheet">-->
	<link rel="stylesheet" type="text/css" href="../../static/css/site.css"
		  th:href="@{/css/site.css}"/>
	<link rel="stylesheet" type="text/css" href="../../static/css/center.css"
		  th:href="@{/css/center.css}"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

		<style>
			.pagination {
				display: inline-block;
				padding-left: 0;
				margin: 20px 0;
				text-align: center; /* 确保分页居中显示 */
			}

			.pagination li {
				display: inline;
			}

			.pagination li a {
				position: relative;
				float: left;
				padding: 8px 12px;
				margin-left: -1px;
				line-height: 1.5;
				color: #007bff;
				text-decoration: none;
				background-color: #fff;
				border: 1px solid #dee2e6;
				transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* 平滑的颜色过渡效果 */
			}

			/* 激活状态的按钮样式 */
			.pagination li.active a {
				color: #fff;
				background-color: #007bff;
				border-color: #007bff;
			}

			/* 按钮悬停效果 */
			.pagination li a:hover {
				color: #0056b3;
				background-color: #e9ecef;
				border-color: #dee2e6;
			}

			/* 禁用状态的按钮样式 */
			.pagination li.disabled a {
				color: #6c757d;
				background-color: #fff;
				border-color: #dee2e6;
			}

			/* 图标样式，使用Font Awesome图标库 */
			.pagination li a i {
				margin-right: 4px; /* 图标和文字之间的间距 */
				font-size: 14px; /* 图标大小 */
			}
		</style>
</head>
<body>

<div id="header" th:replace="frag::header"></div>

<div class="user-center">
	<div class="container clear">
		<div class="crumbs">
			<a href="../index.html">首页</a>
			<span class="sep">/</span>
			<a >交易订单</a>
		</div>

		<div class="menu">
			<h3>订单中心</h3>
			<ul>
				<li class="active"><a href="orderList.html" th:href="@{/user/order/list}">我的订单</a></li>
			</ul>

			<h3>个人中心</h3>
			<ul>
				<li><a href="" th:href="@{/user/person}">我的个人中心</a></li>
				<li><a href="addr.html" th:href="@{/user/addr/toAddr}">收货地址</a></li>
			</ul>

		</div>
		<div class="content">
			<h1 class="title">我的订单<span>请谨防钓鱼链接或诈骗电话，了解更多></span></h1>

			<div class="tab">
				<ul class="clear">
					<li  th:classappend="${status  == 7} ? 'active' : '' "><a href="" th:href="@{/user/order/list?status=7}" >全部有效订单</a></li>
					<li th:classappend="${status  == 0} ? 'active' : '' " ><a href="" th:href="@{/user/order/list?status=0}">待支付</a></li>
					<li th:classappend="${status  == 1} ? 'active' : '' " ><a href="" th:href="@{/user/order/list?status=1}">待收货</a></li>
					<li th:classappend="${status  == 3} ? 'active' : '' " ><a href="" th:href="@{/user/order/list?status=3}">已收货</a></li>
					<li th:classappend="${status  == 6} ? 'active' : '' " ><a href="" th:href="@{/user/order/list?status=6}">已退款</a></li>
				</ul>
			</div>
			
			<div class="order-list">
				<!-- 一个订单 -->
				<div class="order-box order-pay">
					<div class="order-header">
						<div class="status status-pay">
							等待付款
						</div>
					</div>

					<table class="detail">
						<thead>
						<tr>
							<th class="info">2021年10月24日 10:00 | 张三 | 订单号：5180504797403152| 在线支付（支付宝快捷支付）</th>
							<th class="money">应付金额： <span>2599.00</span> 元</th>
						</tr>
						</thead>
						<tbody>

						<tr>
							<td class="goods">
								<div class="goods-box">
									<div class="img">
										<a href=""><img src="../../static/img/big-phone.jpg" ></a>
									</div>
									<div class="goods-info">
										<p class="name"><a href="">Xiaomi Civi 8GB+128GB 闪闪黑</a></p>
										<p class="price">2599元 x 1</p>
									</div>
								</div>
							</td>
							<td class="actions">
								<a class="active" href="">立即付款</a>
								<a href="">订单详情</a>
								<a href="">联系客服</a>
							</td>
						</tr>

						<tr>
							<td class="goods">
								<div class="goods-box">
									<div class="img">
										<a href=""><img src="../../static/img/big-phone.jpg" ></a>
									</div>
									<div class="goods-info">
										<p class="name"><a href="">Xiaomi Civi 8GB+128GB 闪闪黑</a></p>
										<p class="price">2599元 x 1</p>
									</div>
								</div>
							</td>
							<td class="actions">
								<a class="active" href="">立即付款</a>
								<a href="">订单详情</a>
								<a href="">联系客服</a>
							</td>
						</tr>
						</tbody>
					</table>
				</div>

			</div>
			<div id='novel_table'></div>

		</div>

	</div>
</div>

	<!-- 底部 -->
	<div th:replace="frag::footer" id="footer"></div>

	<!-- jQuery -->
	<script type="text/javascript" src="../../static/js/jquery-2.1.4.js" th:src="@{/js/jquery-2.1.4.js}"></script>
	<script src="/lib/layui-v2.6.3/layui.js"></script>
	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	<script src="/js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="/js/template-web.js"></script>
	<script type="text/html" id="all_novel" th:inline="javascript">
		<!--主要表格结束-->
		<!--分页-->
		<nav class="text-center">
			<ul class="pagination pagination-circle">
				{{if data.hasPreviousPage}}
				<li><a href="javascript:void(0);" onclick="getOrderList('{{data.pageNum-1}}')" ><span><i class="mdi mdi-chevron-left"></i></span></a></li>
				{{else}}
				<li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
				{{/if}}
				{{each data.navigatepageNums}}
				{{if $value==data.pageNum}}
				<li class="active"><a href="javascript:void(0);">{{$value}}</a></li>
				{{else}}
				<li><a href="javascript:void(0);" onclick="getOrderList('{{$value}}')"  >{{$value}}</a></li>
				{{/if}}
				{{/each}}
				{{if data.hasNextPage}}
				<li><a href="javascript:void(0);" onclick="getOrderList('{{data.pageNum+1}}')" ><span><i class="mdi mdi-chevron-right"></i></span></a></li>
				{{else}}
				<li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
				{{/if}}
			</ul>
		</nav>
		<!--分页结束-->
	</script>
	<script th:inline="javascript" >
		let status = [[${status}]];
	</script>
	<script th:if="false">
		// 动态页面需要去掉
		$("#header").load("../header.html", function(){
			$(".logo img").attr("src", "../../static/img/logo-mi.png");
		});
		$("#footer").load("../footer.html");
	</script>
	<!-- order.js -->
	<script type="text/javascript" src="../../static/js/order.js" th:src="@{/js/order.js}"></script>
	<!--<script>
	layui.use(['layer', 'jquery'], function(){
		var layer = layui.layer;
		var $ = layui.jquery;

		// 确保DOM完全加载完成
		$(document).ready(function(){
			// 绑定按钮点击事件
			$('#myButton').click(function(){
				// 显示弹窗
				layer.open({
					title: '我的弹窗',
					content: '这是一个简单的Layui弹窗！'
				});
			});
		});
	});
	</script>-->
</body>
</html>